<template>
  <div>
    <div id="map"></div>
    <div class="info"></div>
  </div>
</template>
<script>
/*global AMap*/
var map, marker;
export default {
  data() {
    return {
      arriveCoor: this.address0, //坐标点
      arrive: "", //位置信息
      content: [],
    };
  },
  mounted() {
    this.mapDraw(this.arriveCoor);
  },
  props: ["address0"],
  methods: {
    mapDraw(arriveCoor) {
      map = new AMap.Map("map", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 20, //初始化地图层级
        center: arriveCoor, //初始化地图中心点
      });
      AMap.plugin("AMap.ToolBar", function () {
        //异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });
      // 定位点
      this.addMarker(arriveCoor);
    },
    // 实例化点标记
    addMarker(arriveCoor) {
      marker = new AMap.Marker({
        icon: "", //图片ip
        imageSize: "20px",
        position: arriveCoor,
        offset: new AMap.Pixel(-13, -30),
        // 设置是否可以拖拽
        draggable: false,
        // 设置拖拽效果
        raiseOnDrag: false,
      });
      marker.setMap(map);

      // AMap.event.addListener(marker, "click", () => {
      //   var title = "下户地址";

      //   this.content.push(
      //     "<img src='https://tse1-mm.cn.bing.net/th/id/R-C.8c372fd892b3bd371eb3a1df8bd7fc88?rik=4KxekfOQD28FKA&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170303%2fdfe53a7300794009a029131a062836d5.jpg&ehk=6ayU5y%2fwtGnzhu7g%2bJimm2REgEbHGczl9Mkbg3I1%2b5I%3d&risl=&pid=ImgRaw&r=0 class='imgStyle'>"
      //   );
      //   var infoWindow = new AMap.InfoWindow({
      //     isCustom: true, //使用自定义窗体
      //     content: this.createInfoWindow(title, this.content.join("<br/>")),
      //     offset: new AMap.Pixel(16, -45),
      //   });
      //   infoWindow.open(map, marker.getPosition());
      // });
    },
    //构建自定义信息窗体
    // createInfoWindow(title, content) {
    //   var info = document.createElement("div");
    //   info.className = "custom-info input-card content-window-card";
    //   info.style.width = "10%";
    //   info.style.height = "10%";
    //   var top = document.createElement("div");
    //   var titleD = document.createElement("div");
    //   var closeX = document.createElement("img");
    //   top.className = "info-top";
    //   titleD.innerHTML = "下户地址";
    //   closeX.src = "https://webapi.amap.com/images/close2.gif";
    //   closeX.onclick = this.closeInfoWindow;

    //   top.appendChild(titleD);
    //   top.appendChild(closeX);
    //   info.appendChild(top);

    //   // 定义中部内容
    //   var middle = document.createElement("div");
    //   middle.className = "info-middle";
    //   middle.style.backgroundColor = "white";
    //   middle.innerHTML = content;
    //   info.appendChild(middle);

      // // 定义底部内容
      // var bottom = document.createElement("div");
      // bottom.className = "info-bottom";
      // bottom.style.position = "relative";
      // bottom.style.top = "0px";
      // bottom.style.margin = "0 auto";
      // var sharp = document.createElement("img");
      // sharp.src = "https://webapi.amap.com/images/sharp.png";
      // bottom.appendChild(sharp);
      // info.appendChild(bottom);
      // return info;
    },
    // //关闭信息窗体
    // closeInfoWindow() {
    //   map.clearInfoWindow();
    // },
  
};
</script>
<style lang="less" scoped>
#map {
  width: 100%;
  height: 400px;
}

html,
body,
#container {
  height: 100%;
  width: 100%;
}
.imgStyle{
  width: 100px;
  height: 100px;
}
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 red;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

span {
  margin-left: 5px;
  font-size: 11px;
}

.info-middle img {
  float: left;
  margin-right: 6px;
}

</style>
